<template>
  <div>
    <h2>我是购物车</h2>
    <table>
      <tr>
        <th>勾选</th>
        <th>课程名称</th>
        <th>课程价格</th>
        <th>数量</th>
        <th>总价格</th>
      </tr>
      <tr v-for="(item,index) of cartlist" :key="item.id">
        <td>
          <input type="checkbox" v-model="item.isActive" />
        </td>
        <td>{{item.couseName}}</td>
        <td>{{item.cousePrice}}</td>
        <td>
          <button @click="jian(item,index)">-</button>
          {{item.number}}
          <button @click="jia(item)">+</button>
        </td>
        <td>{{item.cousePrice*item.number}}</td>
      </tr>

      <tr>
        <td></td>
        <td colspan="2">商品选中:{{checkNum}}/{{allLength}}</td>
        <td colspan="2">总价格:{{allPrice}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  props: ["cartlist"],
  name: "",
  data() {
    return {};
  },
  methods: {
    jia(item) {
      item.number++;
    },

    jian(item, index) {
      if (item.number == 1) {
        let flag = window.confirm("是否要删除");
        if (flag) {
          this.$emit("removeItem", index);
        } else {
          return false;
        }
      }
      item.number--;
    },
  },
  components: {},
  computed: {
    checkNum() {
      return this.cartlist.filter((v) => v.isActive == true).length;
    },

    allLength() {
      return this.cartlist.length;
    },

    allPrice() {
      let add = 0;
      this.cartlist.filter((v) => {
        if (v.isActive) {
          add += v.number * v.cousePrice;
        }
      });
      return add;
    },
  },
};
</script>

<style scoped>
h2 {
  margin: 0 auto;
}
table {
  margin: 0 auto;
}
</style>

